import React from 'react';
import {View, Text, Button, ScrollView, TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {useMount} from 'ahooks';
import * as SvgIconHeaderRight from '../../SvgIconHeaderRight';
import {IconColor} from '../../config';
const rPPath = 'OPlayer';
export default ({pageName, setHeaderRight}) => {
  const navigation = useNavigation();
  useMount(() => {
    setHeaderRight(
      <>
        <TouchableOpacity>
          <SvgIconHeaderRight.ProjectionScreen
            color={IconColor}
            width={30}
            height={30}
            style={{marginRight: 10}}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <SvgIconHeaderRight.Replay
            color={IconColor}
            width={32}
            height={32}
            style={{marginRight: 10}}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <SvgIconHeaderRight.Search
            color={IconColor}
            width={28}
            height={28}
            style={{marginRight: 10}}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <SvgIconHeaderRight.Sort
            color={IconColor}
            width={28}
            height={28}
            style={{marginRight: 10}}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <SvgIconHeaderRight.List
            color={IconColor}
            width={28}
            height={28}
            style={{marginRight: 10}}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <SvgIconHeaderRight.Grid
            color={IconColor}
            width={24}
            height={24}
            style={{marginRight: 10}}
          />
        </TouchableOpacity>

        <TouchableOpacity>
          <SvgIconHeaderRight.More
            color={IconColor}
            width={28}
            height={28}
            style={{paddingLeft: 0, paddingRight: 0}}
          />
        </TouchableOpacity>
      </>,
    );
  });

  return (
    <View style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>
        <Text>{pageName}</Text>
        <Button
          title="Go To Video"
          onPress={() => {
            navigation.navigate(`${rPPath}/Video`);
          }}
        />
      </ScrollView>
    </View>
  );
};
